<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>每日运动计划</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/xlsx.full.min.js"></script>
    <script src="js/message.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div class="container">
        <!-- 导航栏 -->
        <header class="navbar">
            <div class="nav-left">
                <span id="current-date">2025年4月5日 星期六</span>
                <span id="week-range">本周：4月1日 - 4月7日</span>
            </div>
            <div class="nav-right">
                <span>本月运动总时长(h)：
                    <span style="color: #52c41a;" id="month-total-completed">0</span> /
                    <span style="color: #ff4d4f;" id="month-total-pending">0</span>
                </span>
            </div>
            <div class="nav-right">
                <span>本月运动总消耗(kcal)：
                    <span style="color: #52c41a;" id="month-total-kcal">0</span>
                </span>
            </div>
            <div class="nav-right">
                <label for="month-picker">选择月份：</label>
                <!--<label class="previous" onclick="updateMonth(false)"><</label>-->
                <button  class="previous" onclick="updateMonth(false)"><</button>
                <input type="month" id="month-picker" />
                <!--<label class="next" onclick="updateMonth(true)">></label>-->
                <button  class="next" onclick="updateMonth(true)">></button>
            </div>
            <div class="nav-right">
                <button class="nav-right-button" id="exportCurrent" onclick="exportExcel(false)">导出本月</button>
                <button class="nav-right-button" id="exportAll" onclick="exportExcel(true)">导出全部</button>
                <button class="nav-right-button" id="clearCurrent" onclick="clearData(false)">清空本月</button>
                <button class="nav-right-button" id="clearAll" onclick="clearData(true)">清空全部</button>
                <button class="nav-right-button" onclick="window.open('data.html', '_blank')">身体数据</button>
            </div>
        </header>

        <!-- 日历主体 -->
        <main class="calendar" id="calendar"></main>
    </div>

    <!-- 添加/编辑计划弹窗 -->
    <div id="plan-modal" class="modal hidden">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h3>编辑计划</h3>
            <label>标题：</label>
            <input list="title-suggestions" id="plan-title" placeholder="输入或选择标题" />
            <datalist id="title-suggestions"></datalist>
            <label>运动内容（用顿号隔开）：</label>
            <textarea id="plan-exercises" rows="4" placeholder="例如：开合跳、高抬腿、俯卧撑"></textarea>

            <div style="display: flex;">
                <label>持续时间(s)：</label>
                <input type="number" id="duration" value="30" min="1" style="width: 150px;margin-right: 30px;"/>
                <label>休息时间(s)：</label>
                <input type="number" id="rest" value="10" min="0" style="width: 150px;"/>
            </div>
            <div style="display: flex;margin-top: 10px;">
                <label>平 均 心 率 ：</label>
                <input type="number" id="ahr" value="0" min="0" style="width: 150px;margin-right: 30px;"/>
                <label>最 大 心 率 ：</label>
                <input type="number" id="mhr" value="0" min="0" style="width: 150px;"/>
            </div>
            <label>总消耗（kcal）：</label>
            <input type="number" id="kcal" value="0" min="0" />
            <button class="modal-button" id="save-plan-btn" onclick="saveCurrentPlan()">保存</button>
            <button class="modal-button" id="start-timer-btn" style="margin-left: 20px;" onclick="startTimer()">开始运动</button>
            <button class="modal-button" id="delete-btn" style="margin-left: 20px;" onclick="deletePlan()">删除当前计划</button>
        </div>
    </div>
</body>
</html>